<script setup>
import Header from '@/components/header/Header.vue'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { city } from '@/utils/RegionCN/city.js'

const drawer2 = ref(false)
const selectedClass = ref({})

// 用户数据
const user = reactive({
  name: '李子明',
  id: '123456',
  type: '学生',
  avatarUrl: '/src/assets/vue.svg',
  sex: '',
  hometown: [],
  selfLevel: '',
  selfDescription: '',
})

// 课程列表
const stuClasses = ref([
  {
    className: '深入理解英语系统',
    teacherName: '杜硕',
    id: 'classId1',
    stuAmount: 30,
    description: '这是一门很有趣的课程，老师很有趣，学生也很有趣，课程内容也很有趣。'
  },
  {
    className: '英语科学导论',
    teacherName: '杜硕',
    id: 'classId2',
    stuAmount: 20,
    description: '这是一门学生很有趣的老师，课程很有趣，也很有趣，课程内容也很有趣。'
  },
  {
    className: '高级语言英语设计',
    teacherName: '杜硕',
    id: 'classId3',
    stuAmount: 20,
    description: '这是一门学生很有趣的老师，课程很有趣，也很有趣，课程内容也很有趣。'
  },
  {
    className: '离散英语',
    teacherName: '杜硕',
    id: 'classId4',
    stuAmount: 20,
    description: '这是一门学生很有趣的老师，课程很有趣，也很有趣，课程内容也很有趣。'
  },
  {
    className: '英语结构',
    teacherName: '杜硕',
    id: 'classId5',
    stuAmount: 20,
    description: '这是一门学生很有趣的老师，课程很有趣，也很有趣，课程内容也很有趣。'
  },
  {
    className: '中级英语实践',
    teacherName: '杜硕',
    id: 'classId6',
    stuAmount: 20,
    description: '这是一门学生很有趣的老师，课程很有趣，也很有趣，课程内容也很有趣。'
  },
  {
    className: '英语交互',
    teacherName: '杜硕',
    id: 'classId7',
    stuAmount: 20,
    description: '这是一门学生很有趣的老师，课程很有趣，也很有趣，课程内容也很有趣。'
  },
  {
    className: '英语分析与设计',
    teacherName: '杜硕',
    id: 'classId8',
    stuAmount: 20,
    description: '这是一门学生很有趣的老师，课程很有趣，也很有趣，课程内容也很有趣。'
  },
  {
    className: '英语学习与句型识别',
    teacherName: '杜硕',
    id: 'classId9',
    stuAmount: 20,
    description: '这是一门学生很有趣的老师，课程很有趣，也很有趣，课程内容也很有趣。'
  },
])

onMounted(() => {
  console.log('user center page mounted')
  // fetch user info
  // fetch user classes
})

const openJoinClass = () => {
  ElMessageBox.prompt('请输入班级邀请码', '加入班级', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputErrorMessage: '邀请码不能为空',
    inputPattern: /\S/,
  })
    .then(({ value }) => {
      ElMessage({
        type: 'success',
        message: `对接接口：已加入班级${value}`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消输入',
      })
    })
}
const confirmExitClass = () => {
  ElMessage({
    type: 'success',
    message: `对接接口：已退出班级“${selectedClass.value.className}”`,
  })
  drawer2.value = false
}

const onSubmit = () => {
  // submit form data
  console.log('submit form data:', user)
  ElMessage({
    message: '对接接口上传',
    type: 'success',
  })
}

const openChangeName = () => {
  ElMessageBox.prompt('请输入新的用户名', '修改用户名', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputErrorMessage: '用户名不能为空',
    inputPattern: /\S/,
  })
    .then(({ value }) => {
      user.name = value
      ElMessage({
        type: 'success',
        message: `对接接口：用户名已更改为：${value}`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消输入',
      })
    })
}

function cancelClick() {
  drawer2.value = false
}
</script>

<template>
  <div class="user-center gradint-background">
    <Header style="width: 100%;">学生用户中心</Header>
    <div class="profile">

      <div class="avatarCard">
        <el-card class="box-card" shadow="hover" :body-style="{ width:'100%' }">
          <div class="profile-bg">
            <img src="@/assets/whu.png" alt="背景图" class="profile-bg-img">
          </div>
          <div class="profile-content">
            <div class="profile-left">
              <div class="avatar">
                <img :src="user.avatarUrl" alt="Avatar" class="avatar-img">
              </div>
              <div class="user-name">
                <span>{{ user.name }}</span>
              </div>
              <div class="change-usrname" @click="openChangeName">修改用户名</div>
            </div>
            <div class="profile-right">
              <div class="user-type">
                <el-tag :type="user.type==='学生'? 'primary' : 'success'" size="large" hit="1">{{ user.type }}</el-tag>
              </div>
              <div class="account-id">
                <span>账号：</span>
                <span>{{ user.id }}</span>
              </div>
            </div>
          </div>

        </el-card>
      </div>
    </div>
    <div class="detail">
      <div class="detailCard">
        <div class="detail-card-left">
          <el-card class="box-detail-card" shadow="hover">

            <el-form :model="user" label-width="auto" style="padding: 10px 40px 0;">

              <el-form-item label="性别">
                <el-radio-group v-model="user.sex">
                  <el-radio value="1"><el-icon color="#409EFF">
                      <Male />
                    </el-icon> 男</el-radio>
                  <el-radio value="2"><el-icon color="#F56C6C">
                      <Female />
                    </el-icon> 女</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="家乡">
                <div class="region-selector">
                  <el-cascader placeholder="尝试搜索" v-model="user.hometown" :options="city" filterable />
                </div>
              </el-form-item>

              <el-form-item label="我的英语水平">
                <el-radio-group v-model="user.selfLevel">
                  <el-radio :value="1">小白</el-radio>
                  <el-radio :value="2">入门</el-radio>
                  <el-radio :value="3">掌握</el-radio>
                  <el-radio :value="4">熟练</el-radio>
                  <el-radio :value="5">大神</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="我的班级">
                <el-dropdown>
                  <el-button>
                    查看已加入班级<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item v-for="item in stuClasses" @click="()=>{selectedClass=item; drawer2 = true}">
                        {{ item.teacherName }}：{{ item.className}}
                      </el-dropdown-item>
                      <el-dropdown-item divided @click="openJoinClass">
                        <el-icon>
                          <Plus />
                        </el-icon>加入新班级
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-form-item>

              <div class="buttons">
                <el-form-item style="display: flex; justify-content: center;">
                  <el-button type="primary" @click="onSubmit" size="large">保存</el-button>
                </el-form-item>
              </div>

            </el-form>
          </el-card>
        </div>

        <div class="detail-card-right">

          <el-card class="box-detail-card" shadow="hover"
            style="height: 100%; padding: 0 20px 0 20px; text-align: center;">

            <div style="margin: 30px 0 10px;">
              <span>🧐说出你的英语学习困扰</span>
            </div>
            <el-input v-model="user.textareaDescription" style="width: 240px;" :rows="8" type="textarea"
              placeholder="例如你可以说你最薄弱的地方是什么，想学习哪方面内容😍" />
          </el-card>
        </div>

      </div>
    </div>

    <!-- 班级详情抽屉 -->
    <el-drawer v-model="drawer2">
      <template #header>
        <h3>{{ selectedClass.className }}</h3>
      </template>
      <template #default>
        <h3 class="selected-class-detail-titles" style="margin-top: 0;">教师</h3>
        <p>{{ selectedClass.teacherName }}</p>
        <h3 class="selected-class-detail-titles">班级人数</h3>
        <p>{{ selectedClass.stuAmount }}</p>
        <h3 class="selected-class-detail-titles">班级简介</h3>
        <p>{{ selectedClass.description }}</p>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-popconfirm title="确定要退出吗?" @confirm="confirmExitClass">
            <template #reference>
              <el-button type="danger">退出班级</el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-drawer>

  </div>

</template>

<style scoped>
.user-center {
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile {
  animation: top-in 0.6s;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
}

.detail {  
  animation: bottom-in 0.6s;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.profile-left {
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* transform: translateY(-30%); */
  margin-top: -70px;
  z-index: 1;
}

.profile-right {
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  align-items: flex-end;
}
.user-type{
  margin-top: 15px;

}
.avatarCard {
  background-color: #fff;
  min-width: 70%;
}
.detailCard {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
  width:auto;
}
.detail-card-left {
  margin-right: 20px;
}
.box-card{
  display: flex;
}
.avatarCard{
  z-index: 2;
}

.profile-bg{
  z-index: 0;
}
.profile-bg .profile-bg-img {
  min-height: 150px;
  max-height: 200px;
  width: 100%;
  object-fit: cover;
  filter: blur(3px);
  z-index: 0;
}
.avatar {
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  
  
}
.avatar img{
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 5px;
  border: 2px solid #fff;
}
.profile-content{
  display: flex;
  justify-content: space-between;
}
.user-name {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;

}
.account-id{
  margin-top: 10px;
  font-size: 13px;
  color: #808080;
}

.box-detail-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.buttons {
  display: flex;
  justify-content: center;

}

.change-usrname {
  font-size: small;
  color: #808080;
  text-decoration: underline;
  cursor: pointer;
}

.selected-class-detail-titles{
  margin: 30px 0 10px;
}
</style>